<template>
  <div class="answer_dialog_commit_container">
    <el-dialog title="" :visible.sync="show" center @closed="closeDialog()">
      <div class='success-tips-top'>
        <div class="success-tips-icon"></div>
        <div class="success-tips-top-content">提交成功</div>
      </div>
      <div class='success-tips-content'>{{period}}</div>
      <div class='success-tips-desc'>当前进度</div>
      <span slot="footer" class="dialog-footer">
         <el-button class="success-tips-btn" type="primary" @click="show = false">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
var vm;
export default {
  components: {},
  data: function() {
    return {
      show: false,
      period: "",
      timer: null,
    }
  },
  methods: {
    init: function(period) {
      this.show = true;
      this.period = period;

      if (vm.timer != null) {
        clearTimeout(vm.timer);
        vm.timer = null;
      }
      vm.timer = setTimeout(() => {
        vm.closeDialog();
      }, 3000);
    },
    closeDialog: function() {
      vm.show = false;
      clearTimeout(vm.timer);
      vm.timer = null;
    }
  },
  updated: function() {


  },
  mounted: function() {

  },
  created: function() {
    vm = this;
  },
  destroy: function() {
    clearTimeout(vm.timer);
    vm.timer = null;
  }
}

</script>
<style lang="scss">
.answer_dialog_commit_container {
  .el-dialog {
    width: 4.96rem;
    height: 4.23rem;
    border-radius: 0.1rem;
    /* border: none;
    box-shadow: none;*/
  }

  .el-dialog__header {
    background-color: #f3f6fc;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
  }

  .el-dialog__headerbtn {
    top: 0.1rem;
  }

  .el-dialog__body {
    padding: 0rem 0 !important;
  }

  .el-dialog__footer {
    position: relative;
    bottom: 0rem;
  }
}

</style>
<style scoped>
.answer_dialog_commit_container {
  /*  background-color: #f3f6fb;
  min-height: 100%;*/
}

.success-tips-top {
  position: relative;
  width: 4.96rem;
  height: 2.1rem;
  background-color: #f3f6fc;

}

.success-tips-icon {
  position: relative;
  width: 0.66rem;
  height: 0.67rem;
  background-image: url(../../../assets/img/answer_system/right.png);
  background-size: 100% 100%;
  margin: 0 auto;
  top: 0.1rem;
}

.success-tips-top-content {
  position: relative;
  margin: 0 auto;
  top: 0.2rem;
  font-size: 0.42rem;
  text-align: center;
  color: #333333;
  letter-spacing: 0.05rem;
}

.success-tips-content {
  position: relative;
  font-size: 0.34rem;
  margin: auto 0;
  text-align: center;
  line-height: 0.5rem;
  top: 0.1rem;
  color: #2870ff;
  letter-spacing: 0.01rem;
}

.success-tips-desc {
  position: relative;
  font-size: 0.24rem;
  margin: auto 0;
  text-align: center;
  line-height: 0.5rem;
  top: 0.04rem;
  color: #666666;
  letter-spacing: 0.01rem;
}

.success-tips-btn {
  position: relative;
  width: 2.93rem;
  height: 0.52rem;
  margin: 0 auto;
  display: block;
  font-size: 0.22rem;
  color: white;
  background-color: #3885f8;
  box-shadow: 0rem 0rem 0.25rem -0.05rem #3885f8;
  /*border-radius: 0.5rem;*/

}

</style>
